<template>
  <view class="container">
    <!-- 标题 -->
    <view class="header">
      <text class="title">二维码生成器</text>
    </view>

    <!-- 输入框 -->
    <view class="input-container">
      <input
        v-model="inputText"
        class="input"
        placeholder="请输入要生成二维码的内容/网址"
        placeholder-class="placeholder"
      />
    </view>

    <!-- 二维码展示 -->
    <view class="qrcode-container">
      <qrcode  cid="qrcode" ref="qrcode" :val="inputText" :size="size" :onval="onval" :loadMake="loadMake"
       :usingComponents="true" @result="qrR" />
    </view>
	<view style="display: flex;margin-top: 10px">
		<button class="generate-button" @click="generateQRCode">生成二维码</button>
		<button class="download-button" @click="downloadQRCode">下载二维码</button>
	</view>
  </view>
</template>

<script>
import QRCode from '@/components/qrcode/qrcode.vue';

export default {
	components: {
		QRCode
	},
  data() {
    return {
		videoAd:null,
		inputText: '', // 要生成的二维码值
		size: 350, // 二维码大小
		unit: 'rpx', // 单位
		icon: '', // 二维码图标
		iconsize: 40, // 二维码图标大小
		lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
		onval: false, // val值变化时自动重新生成二维码
		loadMake: true, // 组件加载完成后自动生成二维码
		qrcodeUrl: 1, // 生成的二维码图片地址
		selectedColor:'#ff0000',
		src:'',
		is_show:0
    };
  },
	onLoad() {
		// const interstitialAd = tt.createInterstitialAd({
		//   adUnitId: "k4skpdhe8us4eqi6o6",
		// });
		// interstitialAd
		//   .load()
		//   .then(() => {
		//     interstitialAd.show();
		//   })
		//   .catch((err) => {
		//     console.log(err);
		//   });
	},
	onShow() {
		var that = this
		that.videoAd = tt.createRewardedVideoAd({ adUnitId: '6noypfvl0bli9sz7y7' });
	},
  methods: {
	  qrR(res) { //生成图片的临时地址
	  	this.src = res;
	  },
    // 生成二维码
    async generateQRCode() {
		var that = this
		if (!this.inputText) {
			uni.showToast({
				title: '请输入内容',
				icon: 'none',
			});
			return;
		}
		// that.$refs.qrcode._makeCode()
		// return
		uni.showModal({
			title:'提示',
			content:'观看激励视频后生成',
			confirmText: '确定',
			confirmColor: '#3CC51F',
			cancelText: '取消',
			cancelColor: '#ccc',
			success: function (res) {
				if (res.confirm) {
					//确定去看广告
					that.showVideoAd();
				}
			}
		})
	},

    // 下载二维码
    downloadQRCode() {
		this.$refs.qrcode._saveCode();
    },
    // 选择颜色
    onColorChange(e) {
      const index = e.detail.value;
	  console.log(index)
      this.selectedColor = this.colorOptions[index];
    },
	bindListener(){
		var that = this
		that.videoAd.onLoad(() => {
			console.log("拉取广告素材成功");
		});
		that.videoAd.onClose((res) => {
			console.log(res)
			if (res.isEnded) {
				//看完奖励
				// that.is_show = 1
				that.$refs.qrcode._makeCode()
			}else{
				//广告未看完
				uni.showToast({
					title: '广告未看完，无法获取奖励',
					icon: 'none',
				});
			}
		});
	  
		that.videoAd.onError(error => {
			console.log("errorCode: " + error.code);
			console.log("errMsg: " + error.errMsg);
		});
	},
	showVideoAd() {
	  // 绑定事件监听
	  this.bindListener();
	  // 显示广告
	  this.videoAd
	    .show()
	    .then(() => {
	      console.log("广告显示成功");
	    })
	    .catch((err) => {
	      console.log("广告组件出现问题", err);
	      // 可以手动加载一次
	      this.videoAd.load().then(() => {
	        console.log("手动加载成功");
	        // 加载成功后需要再显示广告
	        return videoAd.show();
	      });
	    });
	},
	
	unBindListener(){
	  this.videoAd.offLoad(() => {
	    console.log("解除绑定 load 事件的监听器");
	  });
	
	  this.videoAd.offError(() => {
	    console.log("解除绑定 error 事件的监听器");
	  });
	
	  this.videoAd.offClose(() => {
	    console.log("解除绑定 close 事件的监听器");
	  });
	}
  },
  
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 标题 */
.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* 输入框 */
.input-container {
  margin-bottom: 20px;
}

.input {
  width: 100%;
  height: 40px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  font-size: 14px;
}

.placeholder {
  color: #999;
}

/* 颜色选择 */
.color-picker {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.color-label {
  font-size: 14px;
  color: #333;
  margin-right: 10px;
}

.color-selector {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  font-size: 14px;
}

/* 生成按钮 */
.generate-button {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #007AFF;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  margin-right: 10px;
}

/* 二维码展示 */
.qrcode-container {
  text-align: center;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

/* 下载按钮 */
.download-button {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #4CD964;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
}
</style>